<template>
  <div class="box">
    <div class="loginBox">
      <h3 class="login-tit">系统登录</h3>

      <el-form :model="loginInfo" :rules="rules" ref="loginForm">
        <el-form-item prop="account">
          <el-input placeholder="请输入账号" v-model="loginInfo.account">
            <template v-slot:prefix>
              <i class="sell-zhanghao"></i>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input placeholder="请输入密码" v-model="loginInfo.password">
            <template v-slot:prefix>
              <i class="sell-mima"></i>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="doLogin">登录</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
// 声明自定义校验的方法

import { checkLogin } from "@/api/Login/Login.api";
// 表单校验功能导入
import validateMixin from "./Mixins/validateMixin";
// 临时会话存储功能导入
import storage from "@/utils/storage";
import { mapMutations } from "vuex";

export default {
    mixins: [validateMixin],

    data() {
        return {
            loginInfo: {
                account: "",
                password: ""
            }
        };
    },
    methods: {
        ...mapMutations("permission", ["filter_routes"]),
        doLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    checkLogin(this.loginInfo).then(res => {
                        console.log(res);
                        storage.token = res.data.token;
                        storage.roles = res.data.role;
                        storage.id = res.data.id;
                        this.filter_routes(res.data.role);
                        this.$router.push("/");
                    });
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
.box {
    width: 100vw;
    height: 100vh;
    background-color: #2d3a4b;
    .loginBox {
        width: 380px;
        height: 260px;
        position: absolute;
        left: calc(50% - 190px);
        top: calc(50% - 130px);
        .login-tit {
            text-align: center;
            color: #fff;
            margin-bottom: 20px;
        }
    }
}
</style>